<template>
  <view class="search-page">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input 
        v-model="keyword"
        placeholder="请输入搜索关键词"
        @confirm="doSearch"
        focus
      />
      <button @click="doSearch">搜索</button>
    </view>
    
    <!-- 搜索结果显示区 -->
    <view v-if="showResults">
      <!-- 商品列表改为直接渲染 -->
      <view class="product-list">
        <view 
          v-for="item in searchResult" 
          :key="item.id"
          class="product-item"
          @click="goToDetail(item.id)"
        >
          <image :src="item.image" mode="aspectFill" class="product-img"/>
          <view class="product-info">
            <text class="product-name">{{item.name}}</text>
            <text class="product-price">¥{{item.price}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 无结果时的展示区 -->
    <view v-else class="suggestion-area">
      <!-- 历史记录 -->
      <view v-if="searchHistory.length > 0" class="history-section">
        <view class="section-header">
          <text class="section-title">历史搜索</text>
          <text class="clear-btn" @click="clearHistory">清除</text>
        </view>
        <view class="tag-container">
          <view 
            v-for="(item, index) in searchHistory"
            :key="'history-'+index"
            class="tag"
            @click="selectKeyword(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>
      
      <!-- 热门推荐 -->
      <view class="hot-section">
        <view class="section-header">
          <text class="section-title">热门搜索</text>
        </view>
        <view class="tag-container">
          <view 
            v-for="(item, index) in hotKeywords"
            :key="'hot-'+index"
            class="tag"
            @click="selectKeyword(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: [],
      showResults: false, // 新增：控制结果显示
      searchHistory: ['刺绣', '木雕'], // 默认历史记录
      hotKeywords: ['刺绣', '木雕', '漆器', '编织', '印染', '陶瓷']
    }
  },
  methods: {
    // 执行搜索（已修改）
    doSearch() {
      if (!this.keyword.trim()) {
        uni.showToast({ title: '请输入关键词', icon: 'none' })
        return
      }
      
      // 1. 添加到历史记录
      this.addToHistory(this.keyword)
      
      // 2. 模拟搜索数据（直接生成包含关键词的商品）
      this.searchResult = [
        {
          id: 1,
          name: `${this.keyword}商品1`,
          price: Math.floor(Math.random() * 100) + 50,
          image: 'https://via.placeholder.com/200x200/2a5c54/ffffff?text=' + encodeURIComponent(this.keyword + '1')
        },
        {
          id: 2,
          name: `${this.keyword}商品2`,
          price: Math.floor(Math.random() * 100) + 50,
          image: 'https://via.placeholder.com/200x200/3a7d6e/ffffff?text=' + encodeURIComponent(this.keyword + '2')
        }
      ]
      
      // 3. 显示结果区域
      this.showResults = true
      
      console.log('搜索成功:', this.searchResult)
    },
    
    // 其他方法保持不变...
    addToHistory(keyword) {
      const index = this.searchHistory.indexOf(keyword)
      if (index !== -1) this.searchHistory.splice(index, 1)
      this.searchHistory.unshift(keyword)
      if (this.searchHistory.length > 8) this.searchHistory.pop()
      uni.setStorageSync('searchHistory', this.searchHistory)
    },
    
    selectKeyword(keyword) {
      this.keyword = keyword
      this.doSearch()
    },
    
    clearHistory() {
      uni.removeStorageSync('searchHistory')
      this.searchHistory = []
    },
    
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${id}`
      })
    }
  },
  onLoad(options) {
    // 加载历史记录
    this.searchHistory = uni.getStorageSync('searchHistory') || ['刺绣', '木雕']
    
    // 接收来自其他页面的关键词
    if (options.keyword) {
      this.keyword = decodeURIComponent(options.keyword)
      this.doSearch()
    }
  }
}
</script>

<style scoped>
.search-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  display: flex;
  margin-bottom: 30rpx;
}

.search-bar input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  background: #fff;
  border-radius: 35rpx;
  border: 1rpx solid #eee;
}

.search-bar button {
  margin-left: 20rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 30rpx;
  background: #2a5c54;
  color: white;
  border-radius: 35rpx;
  border: none;
}

/* 商品列表样式 */
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  width: 48%;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.product-img {
  width: 100%;
  height: 300rpx;
  display: block;
}

.product-info {
  padding: 15rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  font-size: 30rpx;
  color: #e54d42;
  font-weight: bold;
  margin-top: 10rpx;
  display: block;
}

/* 历史记录和热门搜索样式保持不变... */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
}

.clear-btn {
  font-size: 26rpx;
  color: #999;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  margin: 0 20rpx 20rpx 0;
  padding: 10rpx 25rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  font-size: 28rpx;
}
</style>